<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>模拟QQ侧边栏</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="main-wrapper">
    <div class="left-wrapper" id="left">
        <div class="left-content">
            123456789123456789123456789
        </div>
    </div>
    <div class="right-wrapper" id="right">
        <div class="head-wrapper">
            <div class="head-img" id="headImg"></div>
        </div>
        <div class="right-content">
            123456789123456789123456789
        </div>
        <div class="mask" id="mask"></div>
    </div>
</div>
<script>
    var width = document.documentElement.clientWidth;
    var myWidth = width*0.8;
    var el = document.getElementById("right");
    var el_left = document.getElementById("left");
    var mask = document.getElementById("mask");
    var headImg = document.getElementById("headImg");

    var startX = 0;
    var startY = 0;
    var nowX = 0;
    var nowY = 0;
    var posX = 0;
    var startPosX = 0;

    document.addEventListener('touchstart',initDrag);

    function initDrag(e){
        el.style.removeProperty("transition");
        el_left.style.removeProperty("transition");
        startX = e.changedTouches[0].clientX;
        startY = e.changedTouches[0].clientY;
        document.addEventListener('touchmove',drag);
        document.addEventListener('touchend',removeDrag);
    }

    function drag(e){
        nowX = e.changedTouches[0].clientX;
        nowY = e.changedTouches[0].clientY;
        posX = startPosX + nowX - startX;
        if(Math.abs(nowY - startY) / Math.abs(nowX - startX) > (Math.sqrt(3) / 3)){
            return;
        }
        mask.style.display = "block";
        mask.style.opacity = (posX/myWidth>1?1:posX/myWidth)*0.4;
        if(posX < 0){
            return;
        }
        if(posX > myWidth){
            posX = myWidth;
        }
        el.style.transform = "translateX(" + posX + "px)";
        el_left.style.transform = "translateX(" + (posX/myWidth)*100 + "px)";
    }

    function removeDrag(){
        el.style.transition = "transform 0.3s ease";
        el_left.style.transition = "transform 0.3s ease";
        if(posX > (width/2)){
            el.style.transform = "translateX(" + myWidth + "px)";
            el_left.style.transform = "translateX(100px)";
            startPosX = myWidth;
            mask.style.opacity = 0.4;
        }else{
            el.style.transform = "translateX(0)";
            el_left.style.transform = "translateX(0)";
            mask.style.display = "none";
            startPosX = 0;
            startX = 0;
            startY = 0;
            nowX = 0;
            nowY = 0;
            posX = 0;
        }
        document.removeEventListener('touchmove',drag);
        document.removeEventListener('touchend',drag);
    }

    mask.onclick = function(e){
        el.style.transform = "translateX(0)";
        el_left.style.transform = "translateX(0)";
        mask.style.display = "none";
        startPosX = 0;
        startX = 0;
        startY = 0;
        nowX = 0;
        nowY = 0;
        posX = 0;
    };

    headImg.onclick = function(e){
        posX = myWidth;
        mask.style.display = "block";
        el.style.transition = "transform 0.3s ease";
        el_left.style.transition = "transform 0.3s ease";
        el.style.transform = "translateX(" + myWidth + "px)";
        el_left.style.transform = "translateX(100px)";
        startPosX = myWidth;
        mask.style.opacity = 0.4;
        document.removeEventListener('touchmove',drag);
        document.removeEventListener('touchend',drag);
    }
</script>
</body>
</html>